<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="heard :: head"></head>

<body>
<nav th:replace="heard :: nav"></nav>
<div class="container-fluid" style="font-size: 14px;">
    <div id="toolbar">
        <a class="btn  btn-sm btn-outline-secondary " href="javascript:window.history.back()">返回</a>
        <button type="button" onclick="addPd()" class="btn  btn-sm btn-outline-secondary ">新建</button>
    </div>
    <table id="table" class="table table-sm table-bordered table-hover mb-0">
    </table>
</div>
<input id="pid" style="display:none" th:value="${pid}">


</body>
<script>
    var pid = $("#pid").val();
    $(function () {
        // 初始化PD table
        initPDTable();

    });

    function initPDTable() {
        const columns = [
            {
                field: 'code',
                title: "编码",
            }, {
                field: 'name',
                title: "名称",
            }, {
                field: 'localName',
                title: "本地名称",
            }, {
                field: 'description',
                title: "描述",
            }, {
                field: 'datatype',
                title: "数据类型",
            }, {
                field: 'format',
                title: "格式化",
            }, {
                field: 'allowedValues',
                title: "允许值",
            }, {
                field: 'parameterName',
                title: "参数名称",
            }, {
                field: 'defaultValue',
                title: "默认值",
            }, {
                field: 'nullable',
                title: "可为空",
            }, {
                field: 'extendedDescription',
                title: "扩展描述",
            }, {
                field: 'displayOrder',
                title: "显示顺序",
            }, {
                field: 'maxval',
                title: "最大值",
            }, {
                field: 'minval',
                title: "最小值",
            }, {
                field: 'opt',
                title: "操作",
                formatter: formatterOpt
            },];

        $("#table").bootstrapTable({
            url: "/parameter/definition/page",
            method: 'GET',
            dataType: "json",//数据类型
            sidePagination: "server",
            pagination: true,
            cardView: false,
            columns: columns,
            /*   clickToSelect: true,
               uniqueId: "id",*/
            pageNumber: 1,
            pageList: [5],
            toolbar: '#toolbar',
            search: true,
            showRefresh: true,
            showToggle: true,
            queryParams: function (params) {
                var temp = {
                    pageSize: params.limit,
                    pageNumber: (params.offset / params.limit) + 1,
                    pid: pid
                };
                return temp;
            },
            responseHandler: function (res) {
                return {
                    "total": res.total,
                    "rows": res.data
                }
            },
        })
    }

    function addPd() {
        if (pid === "") {
            alert("请先保存参数");
            return;
        }
        window.location.href = '/home/p/' + pid + '/pd/edit';
    }

    function removePd(pdId) {
        $.ajax({
            type: "delete",
            url: "/parameter/definition/" + pdId,
            async: true,
            contentType: 'application/json',
            dataType: 'JSON',
            success: function (obj) {
                alert("删除成功");
                $('#table').bootstrapTable('refresh')
            }
        });

    }

    function formatterOpt(value, row, index) {
        let pid = $("#pid").val();
        let pdid = row.id;
        return '<a href="/home/p/' + pid + '/pd/' + pdid + '/edit"><i class="fas fa-edit" ></i></a>' +
            '&nbsp;&nbsp;<a href="#" onclick="removePd(\'' + pdid + '\')"><i class="fa fa-times"></i></a>';
    }
</script>
</html>
